<template>
	<view class="container">
		<userInfo :isOpenUserInfo="true"></userInfo>
		<view class="title">基本信息</view>
		<view class="options">
			<view class="optionsLeft">家庭人口数</view>
			<view class="optionsRight">{{helpUser.applicantName||0}}人</view>
		</view>
		<view class="options">
			<view class="optionsLeft">保障人口数</view>
			<view class="optionsRight">{{helpUser.applicantName||0}}人</view>
		</view>
		<view class="options options1">
			<view class="optionsLeft">纳入原因</view>
			<view class="optionsRight optionsRight5">{{helpUser.applicantName||'事件的看法和刷卡积分兑换大数据开发上课设计的返回的是快捷方式就'}}</view>
		</view>
		<view class="options">
			<view class="optionsLeft">申请人</view>
			<input placeholder-class="optionsRight4" class="optionsRight" v-if="!isOpen&&!areaShow" placeholder="请输入姓名" type="text" v-model="helpUser.applicantName" />
			<view class="optionsRight optionsRight4" v-else>{{helpUser.applicantName?helpUser.applicantName:'请输入姓名'}}</view>
		</view>
		<view class="options">
			<view class="optionsLeft">联系电话</view>
			<input placeholder-class="optionsRight4" class="optionsRight" v-if="!isOpen&&!areaShow" placeholder="请输入联系电话" type="number" v-model="helpUser.contactNumber" />
			<view class="optionsRight optionsRight4" v-else>{{helpUser.contactNumber?helpUser.contactNumber:'请输入联系电话'}}</view>
		</view>
		<picker mode="date" :value="helpUser.applicationTime" @change="dateChange">
			<view class="options">
				<view class="optionsLeft">申请时间</view>
				<view class="optionsRight">
					<view class="personNum">{{helpUser.applicationTime}}</view>
					<image class="timeIcon" src="/static/timeIcon.png"></image>
				</view>
			</view>
		</picker>
		<!-- <view class="options" @click="addressChooseShow(1)"> -->
		<view class="options">
			<view class="optionsLeft">户籍地址-县</view>
			<input placeholder-class="optionsRight4" class="optionsRight" v-if="!isOpen&&!areaShow" placeholder="请输入户籍地址-县" type="text" v-model="helpUser.residenceAddressCounty" />
			<view class="optionsRight optionsRight4" v-else>{{helpUser.residenceAddressCounty?helpUser.residenceAddressCounty:'请输入户籍地址-县'}}</view>
		</view>
		<view class="options">
			<view class="optionsLeft">户籍地址-街道</view>
			<input placeholder-class="optionsRight4" class="optionsRight" v-if="!isOpen&&!areaShow" placeholder="请输入户籍地址-街道" type="text" v-model="helpUser.residenceAddressStreet" />
			<view class="optionsRight optionsRight4" v-else>{{helpUser.residenceAddressStreet?helpUser.residenceAddressStreet:'请输入户籍地址-街道'}}</view>
		</view>
		<view class="options">
			<view class="optionsLeft">户籍地址社区</view>
			<input placeholder-class="optionsRight4" class="optionsRight" v-if="!isOpen&&!areaShow" placeholder="请输入户籍地址社区" type="text" v-model="helpUser.residenceAddressCommunity" />
			<view class="optionsRight optionsRight4" v-else>{{helpUser.residenceAddressCommunity?helpUser.residenceAddressCommunity:'请输入户籍地址社区'}}</view>
		</view>
		<picker mode="selector" range-key="dictLabel" :range="sheng" @change="shengChange">
			<view class="options">
				<view class="optionsLeft">居住地址-县</view>
				<view class="optionsRight">
					<view class="position">{{shengChoose.dictLabel}}</view>
					<image class="positionIcon" src="/static/anfangDetail/position.png" mode=""></image>
				</view>
			</view>
		</picker>
		<picker mode="selector" range-key="dictLabel" :range="shiArr" @change="shiChange">
			<view class="options">
				<view class="optionsLeft">居住地址-街道</view>
				<view class="optionsRight">
					<view class="position">{{shiChoose.dictLabel}}</view>
					<image class="positionIcon" src="/static/anfangDetail/position.png" mode=""></image>
				</view>
			</view>
		</picker>
		<picker mode="selector" range-key="dictLabel" :range="quArr" @change="quChange">
			<view class="options">
				<view class="optionsLeft">居住地址-社区</view>
				<view class="optionsRight">
					<view class="position">{{quChoose.dictLabel}}</view>
					<image class="positionIcon" src="/static/anfangDetail/position.png" mode=""></image>
				</view>
			</view>
		</picker>
		<picker mode="selector" :value="choose" :range="shengming" @change="selectChange1">
		<view class="options">
			<view class="optionsLeft">近亲属申明</view>
			<view class="optionsRight">
				<view class="personNum">{{shengming[choose]}}</view>
				<image class="sanjiao" src="/static/kancha/sanjiao.png"></image>
			</view>
		</view>
		</picker>
		<view class="bottomOptions">
			<view class="bottomTitle">致贫原因</view>
			<view class="bottomOptionsBox">
				<view class="bottomOptionsBoxIn" @click="chooseZhipinyuanyin(item)" v-for="(item,index) in zhipinyuanyin" :key="index">
					<image class="chooseIcon" v-if="item.isCheck" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">{{item.dictLabel}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="button1" @click="submit('submit')">
			提交
		</view> -->
		<view class="button" v-if="isSave == '0'" @click="next">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
		<view class="addressAreaBox" v-if="areaShow">
			<van-area class="addressArea" @confirm="chooseAddress" @cancel="areaShow=!areaShow" :area-list="areaList" value="110101" />
		</view>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	import province from '@/address/sheng.js'
	import city from '@/address/shi.js'
	import county from '@/address/qu.js'
	let sheng = {},shi={},qu={};
	province.forEach((item)=>{
		sheng[item.code+'0000'] = item.name
	})
	city.forEach((item)=>{
		shi[item.code+'00'] = item.name
	})
	county.forEach((item)=>{
		qu[item.code] = item.name
	})
	export default {
		components: {
			otherList,
			userInfo
		},
		data() {
			return {
				choose:0,
				shengming:['有','无'],
				id: '',
				isOpen: false,
				user:{},
				helpUser: {
					"id": 1,
					"guaranteeNumber": "202103200001",
					"filedPoorHouseholds": "1",
					"residenceAddressCounty": "220102",
					"residenceAddressStreet": "22010201",
					"residenceAddressCommunity": "2201020102",
					"residentialAddressCounty": "220102",
					"residentialAddressStreet": "220102001",
					"residentialAddressCommunity": "220102001001",
					"applicantName": "张三",
					"contactNumber": "18604444405",
					"applicationTime": "2021-03-16",
					"causesOfPoverty": 1,
					"crUser": "admin"
				},
				startTime: '',
				areaShow:false,
				addressType:1, // 1户籍地址2居住地址
				areaList:{
					'province_list':sheng,
					'city_list':shi,
					'county_list':qu
				},
				zhipinyuanyin:[],
				isSave:'1',
				sheng:[],
				shi:[],
				qu:[],
				shengArr:[],
				shiArr:[],
				quArr:[],
				shengChoose:{},
				shiChoose:{},
				quChoose:{},
				pageInfo:{
					pageName:'基本信息',
					pagePath:'/pages/kancha/index',
					pageIndex:0
				}
			}
		},
		computed:{
			startDate() {
				return this.getDate('start');
			},
			getAddress(){
				return this.areaList['province_list'][(this.helpUser.residentialAddressCounty+'').slice(0,2)+'0000']+' '+this.areaList['city_list'][(this.helpUser.residentialAddressCounty+'').slice(0,4)+'00']+' '+this.areaList['county_list'][this.helpUser.residentialAddressCounty+'']
			},
			getHujiAddress(){
				return this.areaList['province_list'][(this.helpUser.residenceAddressCounty+'').slice(0,2)+'0000']+' '+this.areaList['city_list'][(this.helpUser.residenceAddressCounty+'').slice(0,4)+'00']+' '+this.areaList['county_list'][this.helpUser.residenceAddressCounty+'']
			}
		},
		onLoad(options) {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.helpUser = {
				"id": uni.getStorageSync('helpUser').id||'',
				"guaranteeNumber": uni.getStorageSync('helpUser').guaranteeNumber,
				"filedPoorHouseholds": "1",
				"residenceAddressCounty": uni.getStorageSync('helpUser').residenceAddressCounty||"220722",
				"residenceAddressStreet": uni.getStorageSync('helpUser').residenceAddressStreet||"",
				"residenceAddressCommunity": uni.getStorageSync('helpUser').residenceAddressCommunity||"",
				"residentialAddressCounty": uni.getStorageSync('helpUser').residentialAddressCounty||"220722",
				"residentialAddressStreet": uni.getStorageSync('helpUser').residentialAddressStreet||"",
				"residentialAddressCommunity": uni.getStorageSync('helpUser').residentialAddressCommunity||"",
				"applicantName": uni.getStorageSync('helpUser').applicantName||"",
				"contactNumber": uni.getStorageSync('helpUser').contactNumber||"",
				"applicationTime": uni.getStorageSync('helpUser').applicationTime||"1970-01-01",
				"causesOfPoverty": uni.getStorageSync('helpUser').causesOfPoverty||1,
				"crUser": this.user.userName
			}
			this.getSeason()
		},
		methods: {
			// 声名选择
			selectChange1(e){
				this.choose = e.detail.value
			},
			// 验证
			verifyData(){
				let obj = this.helpUser
				// 验证姓名
				if(this.$verifyEmpty(obj.applicantName)){
					return {
						status:false,
						title:'请填写姓名信息'
					}
				}
				// 验证电话号
				if(!this.$verifyPhone(obj.contactNumber)){
					return {
						status:false,
						title:'电话号不正确'
					}
				}
				// 验证申请时间
				if(new Date().getTime()<new Date(obj.applicationTime.replace('-','/'))){
					return {
						title:'申请时间不能大于当前时间',
						status:false
					}
				}
				// 验证户籍地址县
				if(this.$verifyEmpty(obj.residenceAddressCounty)){
					return {
						status:false,
						title:'户籍地址-县不能为空'
					}
				}
				// 验证户籍地址街道
				if(this.$verifyEmpty(obj.residenceAddressStreet)){
					return {
						status:false,
						title:'户籍地址-街道不能为空'
					}
				}
				// 验证户籍地址社区
				if(this.$verifyEmpty(obj.residenceAddressCommunity)){
					return {
						status:false,
						title:'户籍地址-社区不能为空'
					}
				}
				// 验证居住地址县
				if(Object.keys(this.shengChoose).length == 0){
					return {
						status:false,
						title:'居住地址-县不能为空'
					}
				}
				// 验证居住地址街道
				if(Object.keys(this.shiChoose).length == 0){
					return {
						status:false,
						title:'居住地址-街道不能为空'
					}
				}
				// 验证居住地址社区
				if(Object.keys(this.quChoose).length == 0){
					return {
						status:false,
						title:'居住地址-社区不能为空'
					}
				}
				
				// 验证致贫原因
				let zhipinyuanyinValue = []
				this.zhipinyuanyin.forEach(item=>{
					if(item.isCheck){
						zhipinyuanyinValue.push(item.dictValue)
					}
				})
				if(zhipinyuanyinValue.length == 0){
					return {
						status:true,
						title:'致贫原因不能为空'
					}
				}
				return {
					status:true,
					title:'验证通过'
				}
			},
			// 省选择
			shengChange(e){
				this.shengChoose = this.sheng[e.detail.value]
				this.shiArr = this.shi.filter(item=>{
					return item.dictValue.slice(0,6) == this.shengChoose.dictValue
				})
				this.shiChoose = {}
				this.quChoose = {}
			},
			// 市选择
			shiChange(e){
				this.shiChoose = this.shiArr[e.detail.value]
				this.quArr = this.qu.filter(item=>{
					return item.dictValue.slice(0,9) == this.shiChoose.dictValue
				})
				this.quChoose = {}
			},
			// 区选择
			quChange(e){
				this.quChoose = this.quArr[e.detail.value]
			},
			// 获取致贫原因列表
			async getSeason(){
				uni.showLoading({
					title: '请稍等...',
					mask: false
				});
				let res = await this.$get('/app/bus/dictType?dictType=poverty_causes',{})
				if(res.code == 200){
					let causesOfPoverty = (this.helpUser.causesOfPoverty+'').split(',')
					res.data.forEach(item=>{
						causesOfPoverty.forEach(itemIn=>{
							if(item.dictValue == itemIn){
								item.isCheck = true
							}
						})
					})
					this.zhipinyuanyin = res.data
				}
				
				// 获取政治面貌数组
				let shengArr = await this.$get('/app/bus/dictType?dictType=area_x',{})
				if(shengArr.code == 200){
					this.sheng = shengArr.data.filter(item=>{
						return item.dictLabel == '乾安县'
					})
				}
				let shiArr = await this.$get('/app/bus/dictType?dictType=area_j',{})
				if(shiArr.code == 200){
					this.shi = shiArr.data
					this.shiArr = this.shi.filter(item=>{
						return item.dictValue.slice(0,6) == this.sheng[0].dictValue
					})
				}
				let quArr = await this.$get('/app/bus/dictType?dictType=area_s',{})
				if(quArr.code == 200){
					this.qu = quArr.data
					this.quArr = this.qu.filter(item=>{
						return item.dictValue.slice(0,8) == this.shi[0].dictValue
					})
				}
				this.shengChange({detail:{value:0}})
				this.shiChange({detail:{value:0}})
				this.quChange({detail:{value:0}})
				
				if(this.helpUser.residentialAddressStreet){
					this.shiArr = this.shi.filter(item=>{
						return item.dictValue.slice(0,6) == this.shengChoose.dictValue
					})
					this.shiArr.forEach((item,index)=>{
						if(item.dictValue == this.helpUser.residentialAddressStreet){
							this.shiChange({detail:{value:index}})
						}
					})
					if(this.helpUser.residentialAddressCommunity){
						this.quArr.forEach((item,index)=>{
							if(item.dictValue == this.helpUser.residentialAddressCommunity){
								this.quChange({detail:{value:index}})
							}
						})
					} else {
						this.quChange({detail:{value:0}})
					}
				}
				uni.hideLoading()
			},
			// 显示地址选择
			addressChooseShow(type){
				this.addressType = type
				this.areaShow = true
			},
			// 选择地址
			chooseAddress(e){
				//{code: "150000", name: "内蒙古自治区"}
				let values = e.detail.values
				// 户籍地址
				if(this.addressType == 1){
					this.helpUser.residenceAddressCounty = values[2].code
				}
				// 居住地址
				if(this.addressType == 2){
					this.helpUser.residentialAddressCounty = values[2].code
				}
				this.areaShow = false
			},
			// 提交
			async submit(type){
				let result = this.verifyData()
				if(type == 'next'){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				let zhipinyuanyinValue = []
				this.zhipinyuanyin.forEach(item=>{
					if(item.isCheck){
						zhipinyuanyinValue.push(item.dictValue)
					}
				})
				this.helpUser.causesOfPoverty = zhipinyuanyinValue.join(',')
				this.helpUser.residentialAddressCounty = this.shengChoose.dictValue?this.shengChoose.dictValue:''
				this.helpUser.residentialAddressStreet = this.shiChoose.dictValue?this.shiChoose.dictValue:''
				this.helpUser.residentialAddressCommunity = this.quChoose.dictValue?this.quChoose.dictValue:''
				uni.showLoading({
					title:'请稍等...'
				})
				let helpUser = this.helpUser
				let data = {
					"id":helpUser.id,
					"guaranteeNumber": helpUser.guaranteeNumber,
					"filedPoorHouseholds": helpUser.filedPoorHouseholds,
					"residenceAddressCounty": helpUser.residenceAddressCounty,
					"residenceAddressStreet": helpUser.residenceAddressStreet,
					"residenceAddressCommunity": helpUser.residenceAddressCommunity,
					"residentialAddressCounty": helpUser.residentialAddressCounty,
					"residentialAddressStreet": helpUser.residentialAddressStreet,
					"residentialAddressCommunity": helpUser.residentialAddressCommunity,
					"applicantName": helpUser.applicantName,
					"contactNumber": helpUser.contactNumber,
					"applicationTime": helpUser.applicationTime,
					"causesOfPoverty": helpUser.causesOfPoverty,
					"crUser": helpUser.crUser
				}
				let res = await this.$post('/app/bus/updateTask',data,false)
				if(res.code == 200){
					uni.setStorageSync('helpUser',this.helpUser)
					uni.hideLoading()
					let pageStatus = uni.getStorageSync('pageStatus')?uni.getStorageSync('pageStatus'):{}
					if(result.status){
						pageStatus.index = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.index = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
				
					if(type == 'submit'){
						// uni.showToast({
						// 	title:'保存成功',
						// 	duration:2000
						// })
					} else {
						this.link()
					}
					return
				}
				uni.hideLoading()
			},
			// 下一步
			next(){
				this.submit('next')
			},
			// 申请时间选择
			dateChange(e){
				this.helpUser.applicationTime = e.detail.value
			},
			// 获取开始时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 基本信息开关
			isOpenChange(e) {
				this.isOpen = e
				if(e){
					this.submit('submit')
				}
			},
			link() {
				uni.redirectTo({
					url: '/pages/kancha/familyMemberInfo'
				})
			},
			selectChange(e, str) {
				this[e + 'Index'] = str.detail.value
			},
			chooseZhipinyuanyin(itemIn) {
				itemIn.isCheck = !itemIn.isCheck
				this.zhipinyuanyin = JSON.parse(JSON.stringify(this.zhipinyuanyin))
				let arr = []
				this.zhipinyuanyin.forEach(item=>{
					if(item.isCheck){
						arr.push(item.dictValue)
					}
				})
				this.helpUser.causesOfPoverty = arr.join(',')
			}
		}
	}
</script>

<style>
	page {
		background: white;
	}
</style>
<style scoped>
	.sanjiao {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}
	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #fa5245;
		line-height: 1;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.options {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.optionsLeft {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsBottomTitle {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsRight {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		text-align: right;
		max-width: 350rpx;
	}
	.optionsRight4{
		color: #ccc;
		
	}
	.optionsRight5{
		text-align: left;
	}
	.optionsBottomBottom {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.position {
		max-width: 360rpx;
	}

	.optionsRight1 {
		max-width: 400rpx;
		height: 40rpx;
		color: #ccc;
		padding: 0;
		margin: 0;
	}

	.positionIcon {
		width: 27rpx;
		height: 38rpx;
		margin-left: 25rpx;
	}

	.timeIcon {
		width: 26rpx;
		height: 25rpx;
		margin-left: 20rpx;
	}

	.kongge {
		width: 20rpx;
	}

	.optionsBottomBox {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.line {
		height: 26rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}

	.uploadFile {
		width: 184rpx;
		height: 143rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.wordBox {
		padding: 20rpx 80rpx;
	}

	.wordBox text {
		color: #fa5245;
	}

	.wordOptions {
		font-size: 22rpx;
		color: #ccc;
	}

	.bottomOptions {
		width: 670rpx;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
	}

	.bottomTitle {
		color: #ccc;
	}

	.bottomOptionsBox {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.bottomOptionsBoxIn {
		width: 290rpx;
		display: flex;
		align-items: center;
		height: 45rpx;
	}

	.chooseIcon {
		width: 28rpx;
		height: 27rpx;
	}

	.bottomOptionsTitle {
		margin-left: 28rpx;
	}

	.button1 {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: #656668;
		font-size: 28rpx;
		color: white;
	}

	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;

	}

	.zhenchayuan {
		font-size: 24rpx;
		color: #ccc;
		margin-top: 20rpx;
		text-align: center;
	}

	.bottom {
		height: 160rpx;
	}

	.topTitleBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}

	.listTiteBox {
		position: relative;
	}

	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}

	.listTitle {
		font-size: 38rpx;
		position: relative;
	}

	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}

	.childrenBox {
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}

	.childrenOptionsBox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.childrenOptionsTitle {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}

	.childrenOptionsDes {
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}

	.rightOpen {
		transform: rotate(90deg);
	}

	.line1 {
		height: 20rpx;
		background-color: #efefef;
	}

	.otherInfo {
		width: 200rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top: 460rpx;
		font-family: '黑体';
	}
	.addressAreaBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.addressArea{
		width: 750rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.options1{
		align-items: flex-start;
	}
</style>
